<script setup lang="ts">
import { useAppFooterRouteNames as names } from '~/config'

const route = useRoute()

const active = ref(0)

const show = computed(() => {
  if (route.name && names.includes(route.name))
    return true
  return false
})
</script>

<template>
  <van-tabbar v-if="show" v-model="active" route placeholder fixed active-color="#ffffff" inactive-color="#838797">
    <van-tabbar-item replace to="/">
      <span class="text">{{ $t('tabbar.home') }}</span>
      <template #icon="props">
        <img src="/imgs/home.png" :class="{ 'inactive': !props.active }" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/activity">
      <span class="text">{{ $t('tabbar.activity') }}</span>
      <template #icon="props">
        <img src="/imgs/activity_icon.png" :class="{ 'inactive': !props.active }" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/recharge">
      <span class="text">{{ $t('tabbar.recharge') }}</span>
      <template #icon="props">
        <img src="/imgs/recharge.png" :class="{ 'inactive': !props.active }" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/custoService">
      <span class="text">{{ $t('tabbar.custoService') }}</span>
      <template #icon="props">
        <img src="/imgs/service.png" :class="{ 'inactive': !props.active }" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/my">
      <span class="text">{{ $t('tabbar.my') }}</span>
      <template #icon="props">
        <img src="/imgs/my.png" :class="{ 'inactive': !props.active }" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<style lang="css" scoped>
::v-deep .van-tabbar {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  height: 62px;
  background: #323838;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
  margin-top: 3px;
}
::v-deep .van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after{
  border-width:0;
}
::v-deep .van-tabbar-item--active {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #323838;
}
.van-tabbar  img{
  width: 25px;
}
.inactive{
  filter: brightness(0) saturate(100%) invert(57%) sepia(6%) saturate(826%) hue-rotate(186deg) brightness(92%) contrast(90%);
  
}
</style>
